<template>
  <a-spin :spinning="spinning">
    <!-- <a-button type="primary" @click="saveRoleAuthority">保存权限</a-button> -->
    <a-tree
      v-model="menutree.checkedKeys"
      checkable
      :replaceFields="replaceFields"
      :checkStrictly="true"
      :tree-data="menutree.treeData"
      @check="onCheck"
    />
  </a-spin>
</template>
<script>
import { getRoleMenuTree, updateRoleResourceAuthority } from "@/api/org/role";
export default {
  props: {
    roleId: {
      type: String
    }
  },
  data() {
    return {
      replaceFields: { children: "children", title: "title", key: "menuId" },
      spinning: false,
      queryparam: {
        roleId: this.roleId
      },
      menutree: {
        treeData: [],
        checkedKeys: []
      }
    };
  },
  created() {
    this.getRoleMenuTree();
  },
  methods: {
    getRoleMenuTree() {
      this.spinning = true;
      getRoleMenuTree(this.queryparam)
        .then(response => {
          this.menutree = response.data.data;
        })
        .finally(() => {
          this.spinning = false;
        });
    },
    onCheck(keys) {
      this.menutree.checkedKeys = keys.checked;
    },
    saveRoleAuthority() {
      var data = {
        roleId: this.roleId,
        resourceKeys: this.menutree.checkedKeys.join(",")
      };
      this.spinning = true;
      updateRoleResourceAuthority(data)
        .then(response => {
          this.$message.success("权限保存成功");
          this.getRoleMenuTree();
        })
        .finally(() => {
          this.spinning = false;
        });
    }
  }
};
</script>